<template>
	<div>
		<topbar :title='title'></topbar>
		<section>
		    <div v-for="item in districtList">
		    	<h3 :class="{Collapsing:true}">{{item.name}}</h3>
			    <div :class="{coll_body:true}">
			        <a href="#" class="clearfix" v-for="item1 in item.list">
			        	<div class="cinema-title pull-left">
			        		<p>
					        	<span class="cinema-city">{{item1.name}}</span>
					        	<span class="zuo c-icon">座</span>
					        	<span class="tong c-icon">通</span>
				        	</p>
				        	<p>
				        		<span class="cinema-tip tip01">可乐爆米花</span>
				        		<span class="cinema-tip tip02">优惠活动</span>
				        	</p>
				        	<p>{{item1.address}}</p>
				        	<p>距离未知</p>
			        	</div>
			        	<div class="cinema-icon pull-right">
			        		<span class="glyphicon glyphicon-menu-right"></span>
			        	</div>
			        </a>
			    </div>
		    </div>
		</section>

	</div>
</template>
<script>
	import $ from 'jquery';
	import topbar from './../home/topbar.vue';
	export default {
		data:function() {
			return {
				title:'全部影院',
				districtList:[]
				
			}	
		},
		components:{
			topbar:topbar
		},
		mounted:function() {
			var that = this;
			var obj = {};
			var t = new Date().getTime();
			var url = 'http://localhost:3000/cinema?time='+t;
			$.get(url,function(res) {
				var data = res.data.cinemas;
				for (var i = 0; i < data.length; i++) {
					var str = data[i].district.name;
					if (!obj[str]) {
						obj[str]=[];
					}
					obj[str].push(data[i])
				}
				for(var o in obj){
					var obj1={}
					if (!obj1['name']) {
						obj1['name']=o;
						obj1['list']=[];
					}
					for (var i = 0; i < obj[o].length; i++) {
						obj1['list'].push(obj[o][i])
					}
					that.districtList.push(obj1)

				}
				that.$nextTick(function() {
				// $(".coll_body").eq(0).show();
				$(".Collapsing").click(function(){
	
			        $(this).next(".coll_body").slideToggle(300);
				})	
			})

			}); 
		}
	}
</script>
<style>
	
    .Collapsing{
     font-size: 14px;
     width: 100%; 
     height: 40px; 
     line-height: 40px; 
     padding-left: 16px;
     cursor: pointer; 
     border-bottom: 1px solid white; 
     background-color: #e1e1e1; 
     color: #636363; 
      margin-bottom: 1px;
 	}
    .coll_body{display: none; }
    .coll_body a{
    	display:block;
    	width:100%; 
    	margin: 0 auto;
    	padding: 10px 0 12px 16px;
	    border-bottom: 1px solid #e1e1e1;
	    cursor: pointer;
	    background: #fff
    }
    .cinema-title{
    	width: 75%;
	    cursor: pointer;
	    overflow: hidden;
    }
    .cinema-title p{
    	width: 100%;
	    margin-bottom: 5px;
	    line-height:18px;
	    white-space: nowrap;
    	color: #ccc;
    }
    .cinema-title p:first-child{
    	height:30px;
    }
    .cinema-city{
    	font-size: 16px;
    	color: #333;
    	overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    display: inline-block;
	    vertical-align: bottom;
	    max-width: 180px;
	    margin-right: 3px;
    }
    .c-icon{

    	display:inline-block;
    	vertical-align: bottom;
    	border-radius:50%;
    	text-align:center;
    	line-height:18px;
    	width:20px;
    	font-size:12px;
    	
    }
    .zuo{
    	color: #fc8558;
    	border:1px solid #fc8558;
    }
    .tong{
    	color: #88aec8;
    	border:1px solid #88aec8;
    }
    .cinema-icon{
    	padding-right: 15px;
	    color: #c6c6c6;
    }
    .cinema-tip{
    	display: inline-block;
	    border-radius: 3px;
	    padding: 0 5px;
	    margin: 0 5px;
	    font-style: normal;
	    color: #fff;
	    height: 15px;
	    line-height: 15px;
    }
    .cinema-tip.tip01{
    	background-color: #51add0;
    }
    .cinema-tip.tip02{
    	background-color: #ff9658;
    }
</style>